import React from 'react';
import { Card, Row, Col, Statistic, Progress } from 'antd';
import { UserOutlined, TeamOutlined, DashboardOutlined } from '@ant-design/icons';

/**
 * 首页仪表板
 * 展示系统概览信息
 */
const Dashboard: React.FC<React.PropsWithChildren<unknown>> = () => {
  return (
    <div>
      <h2>系统概览</h2>
      
      {/* 统计卡片 */}
      <Row gutter={16} style={{ marginBottom: 24 }}>
        <Col span={8}>
          <Card>
            <Statistic
              title="用户总数"
              value={1128}
              prefix={<UserOutlined />}
              valueStyle={{ color: '#3f8600' }}
            />
          </Card>
        </Col>
        <Col span={8}>
          <Card>
            <Statistic
              title="部门数量"
              value={56}
              prefix={<TeamOutlined />}
              valueStyle={{ color: '#1890ff' }}
            />
          </Card>
        </Col>
        <Col span={8}>
          <Card>
            <Statistic
              title="系统运行"
              value={99.8}
              suffix="%"
              prefix={<DashboardOutlined />}
              valueStyle={{ color: '#cf1322' }}
            />
          </Card>
        </Col>
      </Row>

      {/* 进度统计 */}
      <Row gutter={16}>
        <Col span={12}>
          <Card title="用户活跃度" bordered={false}>
            <Progress percent={75} status="active" />
            <p style={{ marginTop: 8, color: '#666' }}>当前用户活跃度良好</p>
          </Card>
        </Col>
        <Col span={12}>
          <Card title="系统负载" bordered={false}>
            <Progress percent={45} status="active" />
            <p style={{ marginTop: 8, color: '#666' }}>系统运行平稳</p>
          </Card>
        </Col>
      </Row>
    </div>
  );
};

export default Dashboard;